<template>
	<navbar-module title="分配工单"></navbar-module>

	<tm-app>
		<!-- 未分配 -->
		<view v-if="itemData.length>0" class="firstDom">
			<view class="listDom">
				<tm-scrolly :refresher="false" v-model="pull" v-model:bottom-value="bottomFresh" @refresh="refresh"
					@bottom="refreshBottom" _style="height:100%">
					<no-work-list-item :data="{}" v-for="item in itemData" :key="item.code"
						:code="item.content.mode.label" icon="tmicon-terminal">
						<view @click="openPick(item.code)">
							<tm-text :label="`猪仔名称：${item.pig.name}`" class="text" :fontSize="32" />
							<tm-text :label="`猪仔品种：${item.pig?.pigLevel?.breed?.name}`" class="text" :fontSize="32" />
							<tm-text :label="`喂养方式：${item.content.mode.label}`" class="text" :fontSize="32" />
							<tm-text :label="`创建时间：${item.createTime}`" class="text text-border" color="#999"
								:font-size="28" />
						</view>
						<template #btn>
							<tm-button @click="openPick(item.code)" size="mini" label="分配" :padding="[10,20]"
								:width="100" :round="6" :fontSize="28" />
						</template>
					</no-work-list-item>
				</tm-scrolly>
			</view>
		</view>
		<view v-else>
			<no-data :flag="loadFlag" />
		</view>

		<!-- <tm-picker map-key="label" @confirm="pickPeople" v-model:show="showPicker" :columns="peopleData" v-model="pickedPeople" color="#23C343"/> -->

		<tm-drawer ref="drawer" placement="bottom" v-model:show="showPicker" closeable>
			<view class="px-40">
				<view style="height:360rpx;overflow:auto">
					<tm-radio-group model="button" v-model="pickedPeople">
						<tm-grid :width="650" :col="4">
							<tm-grid-item v-for="item in peopleData" :key="item.value">
								<tm-radio :value="item.value" :label="item.label" color="#60ab41"
									:fontSize="32"></tm-radio>
							</tm-grid-item>
						</tm-grid>
						<!-- <tm-radio v-for="item in peopleData" :value="item.value" :label="item.label" color="#60ab41" :fontSize="32"></tm-radio> -->
					</tm-radio-group>
				</view>
				<tm-button block label="确认选择" color="#60ab41" @click="pickPeople" :fontSize="34"></tm-button>
			</view>
		</tm-drawer>

		<tm-message ref="msg" :lines="2" />
	</tm-app>
</template>

<script setup lang='ts'>
	import {
		ref
	} from 'vue'
	import {
		getWork,
		basicStaffOptions,
		distribute
	} from '../../index/resource/http'
	import tmMessage from '../../../tmui/components/tm-message/tm-message.vue'

	const msg = ref < InstanceType < typeof tmMessage > | null > (null)

	const loadFlag = ref(false)
	const drawer = ref(null)

	const peopleData = ref([])
	const itemData = ref([])
	const pickedPeople = ref([])
	const pickedOrder = ref()

	const params = {
		pageNo: 1,
		pageSize: 10
	}
	const bottomFresh = ref(false)
	const pull = ref(false)
	const bottomFlag = ref(true)

	const showPicker = ref(false)


	const getData = async () => {
		itemData.value = []
		loadFlag.value = false
		const {
			data
		} = await getWork(params)
		itemData.value = data.records
		loadFlag.value = true

		bottomFlag.value = data.hasNext
	}
	getData()


	const getPeople = async () => {
		const {
			data
		} = await basicStaffOptions()
		peopleData.value = data
	}
	getPeople()


	const pickPeople = async () => {
		const data = await distribute({
			code: pickedOrder.value,
			// staffCode:peopleData.value[pickedPeople.value[0]].value
			staffCode: pickedPeople.value,
		})
		if (data.code == 0) {
			msg.value.show({
				model: 'success'
			})
			getData()
			drawer.value.close()
		}

	}

	const openPick = (code) => {
		showPicker.value = true
		pickedOrder.value = code
	}

	const refreshBottom = async () => {
		if (bottomFlag.value) {
			bottomFresh.value = true
			params.pageNo++
			const {
				data
			} = await getWork(params)
			itemData.value.push(...data.records)
			bottomFresh.value = false
			bottomFlag.value = data.hasNext
		}
	}

	const refresh = async () => {
		setTimeout(() => {
			pull.value = false
		})
	}
</script>

<style>
</style>